<!--
 * @Author: 陈文锋 3235413554.qq.com
 * @Date: 2024-10-24 16:26:49
 * @LastEditors: 陈文锋 3235413554.qq.com
 * @LastEditTime: 2024-12-05 16:37:04
 * @FilePath: \jyq-pet-wexin\packageShop\components\CouponPop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view :catchtouchmove="true">
    <view class="coupon-list-window" :class="coupon.coupon === true ? 'on' : ''" :catchtouchmove="true">
      <view class="title">
        优惠券
        <!-- <text class="iconfont icon-guanbi" @click="close"></text> -->
      </view>
      <scroll-view scroll-y style="height: 550rpx; padding-bottom: 160rpx" :catchtouchmove="true">
        <view class="coupon-list" v-if="coupon.list.length > 0">
          <view class="item acea-row row-center-wrapper" v-for="(item, couponpopIndex) in coupon.list"
            :key="couponpopIndex" @click="getCouponUser(couponpopIndex, item.id)">
            <view class="money" style="flex-direction: row">
              ￥
              <text class="num">{{ item.couponPrice }}</text>
            </view>
            <view class="text">
              <view class="condition line1">购物满{{ item.useMinPrice }}元可用</view>
              <view class="data acea-row row-between-wrapper">
                <view v-if="item.end_time === 0">不限时</view>
                <view v-else>{{ item.startTime }}-{{ item.endTime }}</view>
                <view class="bnt acea-row row-center-wrapper" :class="!item.isUse ? 'bg-color-red' : 'gray'">{{
                  !item.isUse ? '立即领取' : '已领取' }}</view>
              </view>
            </view>
          </view>
        </view>
        <!--无优惠券-->
        <view class="pictrue" v-else>
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
        </view>
      </scroll-view>
    </view>
    <view class="mask" :hidden="coupon.coupon === false" :catchtouchmove="true" @touchmove.prevent @click="close">
    </view>
  </view>
</template>
<script>
import { getCouponReceive } from '@/api/user'
export default {
  name: 'CouponPop',
  props: {
    coupon: {
      type: Object,
      default: () => { },
    },
  },
  methods: {
    close: function () {
      this.$emit('changeFun', { action: 'changecoupon', value: false }) //$emit():注册事件；
    },
    getCouponUser: function (index, id) {
      let that = this,
        list = that.coupon.list
      if (list[index].is_use === true) return
      getCouponReceive(id).then(function () {
        uni.showToast({
          title: '已领取',
          icon: 'none',
          duration: 2000,
        })
        that.$set(list[index], 'is_use', true)
        that.$emit('changefun', { action: 'currentcoupon', value: index })
        that.$emit('changeFun', { action: 'changecoupon', value: false })
      })
    },
  },
}
</script>

<style>
.bg-color-red {
  background-color: #ff6010 !important;
}
</style>
